<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>openlayers examples</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet">

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .current_page {
            background: red;
        }
    </style>
</head>

<body>
    <div id="changeThemeBox" style="position: fixed;bottom:20px;left: 20px;">
        <select id="changeTheme" name="changeTheme">
            <option>默认</option>
            <option>魂动红</option>
            <option>琉璃绿</option>
            <option>魅影蓝</option>
        </select>
    </div>
    <div id="sidebar">
        <h3 id="currentPage">01_helloWorld.html</h3>
        <h1 id="logo">openlayers DEMO</h1>
        <h2>入门</h2>
        <ol>
            <!-- class="current_page " -->
            <li>
                <a href="#" url-link="01_helloWorld.html"> </a>
            </li>
            <li>
                <a href="#" url-link="02_addGaode.html"> </a>
            </li>
            <li>
                <a href="#" url-link="03_draw.html"> </a>
            </li>
            <li>
                <a href="#" url-link="04_direction.html"> </a>
            </li>
            <li>
                <a href="#" url-link="05_showfeature.html"> </a>
            </li>
            <li>
                <a href="#" url-link="06_clickinfo.html"> </a>
            </li>
            <li>
                <a href="#" url-link="07_showcoordinate.html"></a>
            </li>
            <li>
                <a href="#" url-link="08_featuredrag.html"></a>
            </li>
            <li>
                <a href="#" url-link="09_trajectory.html"></a>
            </li>
            <li>
                <a href="#" url-link="10_selected.html"></a>
            </li>
            <li>
                <a href="#" url-link="11_hover.html"></a>
            </li>
            <li>
                <a href="#" url-link="12_provincefeature.html"></a>
            </li>
            <li>
                <a href="#" url-link="13_morepoint.html"></a>
            </li>
            <li>
                <a href="#" url-link="14_morepoint2.html"></a>
            </li>
            <li>
                <a href="#" url-link="15_manypolygon.html"></a>
            </li>
            <li>
                <a href="#" url-link="16_manyline.html"></a>
            </li>
            <li>
                <a href="#" url-link="17_manygraph.html"></a>
            </li>
            <li>
                <a href="#" url-link="18_save.html"></a>
            </li>
            <li>
                <a href="#" url-link="19_pointmove.html"  class="current_page"></a>
            </li>
            <li>
                <a href="#" url-link="20_linemove.html"></a>
            </li>
        </ol>
        <h2>进阶</h2>
        <ol>
            <li>
                <a href="#" url-link="11_provincefeature.html"></a>
            </li>
            <li>
                <a href="#">
                </a>
            </li>
        </ol>
    </div>
    <div id="container">
        <iframe id="mapUrlContent" src="example/01_helloWorld.html" frameborder="0" width="100%" height="100%" style="display: block;"></iframe>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./library/bootstrap/js/bootstrap.js"></script>
    <script>
        $("#logo").click(function() {
            window.open("./library/v4.6.5/examples");
        });

        var links = $("ol>li a[url-link]");
        $.each(links, function(i, val) {
            val = $(val)
            var link = val.attr("url-link");
            link = link.split("_");
            var len = link.length;
            link = link[len - 1];
            val.text(link);
        })

        $("#sidebar a").click(function(e) {
            $("a").removeClass("current_page")
            $(this).addClass("current_page");
            var url = $(this).attr("url-link");
            $("#mapUrlContent").attr("src", "example/" + url);
            $("#currentPage").text(url);
        });

        if ($(".current_page")) {
            var url = $(".current_page").attr("url-link");
            $("#mapUrlContent").attr("src", "example/" + url);
            $("#currentPage").text(url);
        }

        var theme = localStorage.getItem("theme");
        if (theme) {
            switch (theme) {
                case 'theme1':
                    option = '魂动红';
                    break;
                case 'theme2':
                    option = '琉璃绿';
                    break;
                case 'theme3':
                    option = '魅影蓝';
                    break;
                default:
                    option = '默认';
            }
            $("html").removeAttr("class").addClass(theme);
            $("option:contains(" + option + ")").prop("selected", "selected")
        }
        $("#changeTheme").change(function() {
            var html = $("html");
            var opt = $("#changeTheme").val();
            var theme;
            switch (opt) {
                case '魂动红':
                    theme = 'theme1';
                    break;
                case '琉璃绿':
                    theme = 'theme2';
                    break;
                case '魅影蓝':
                    theme = 'theme3';
                    break;
                default:
            }
            $("html").removeAttr("class").addClass(theme);
            localStorage.setItem("theme", theme)
        });
    </script>

    <script>
    </script>
</body>

</html>